<template>
	<div class="layout-pd">
		<zh-header-toolbar>
			<zh-button style="margin-left: 8px" button-type="add" @click="addLabel"> 创建标签 </zh-button>
			<zh-button style="margin-left: 8px" button-type="edit" @click="editLabel">编辑 </zh-button>
			<zh-button style="margin-left: 8px" button-type="del" @click="deleteLabel">删除 </zh-button>
		</zh-header-toolbar>
		<zh-space style="padding-top: 10px">
			<zh-card title="">
				<zh-form ref="labelQueryForm" :model="state.queryLabelParam">
					<zh-form-input prop="title" label="标签名称" placeholder="支持模糊查询" v-model="state.queryLabelParam.title"></zh-form-input>
					<zh-form-select
						prop="labelType"
						label="标签类型"
						placeholder="请选择"
						:options="state.dictData.LABELTYPE"
						v-model="state.queryLabelParam.labelType"
					></zh-form-select>
					<template v-if="state.advanced">
						<zh-form-select
							prop="status"
							label="有效状态"
							placeholder="请选择"
							:options="state.dictData.STATUS"
							v-model="state.queryLabelParam.status"
						></zh-form-select>
						<zh-form-input prop="remarks" label="备注" v-model="state.queryLabelParam.remarks"></zh-form-input>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="labelQueryForm" :table-ref="labelListTable"> </zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="labelListTable"
				title="查询结果"
				:height="600"
				:url="state.tableUrl"
				:columns="state.labelColumn"
				:disabled="false"
				highlight-current-row
				@radio-change="radioChangeEvent"
			>
				<template #status_edit="{ row }">
					<el-switch
						v-model="row.status"
						active-text="启用"
						inactive-text="禁用"
						active-value="1"
						inactive-value="0"
						inline-prompt
						size="large"
						@change="onStatusChange(row)"
						:width="50"
					></el-switch>
				</template>
			</zh-table>
		</zh-space>
		<zh-dialog :title="state.modalTitle" width="85%" v-model="state.visible" @confirm="saveLabel">
			<label-edit-form ref="labelPage" :labelInfo="state.selectRow" v-model="state.visible" />
		</zh-dialog>
	</div>
</template>

<script lang="ts" setup name="LabelManager">
import LabelEditForm from './component/LabelEditForm.vue';
//------------------定义子组件---------------------------
const labelQueryForm = ref<any>({});
const labelListTable = ref<any>({});
const labelPage = ref<any>({});

//------------------内部变量定义-------------------------
const state = reactive({
	description: '标签管理',
	// 高级搜索 展开/关闭
	advanced: false,
	dictData: [] as any,
	// 标签查询条件
	queryLabelParam: {} as any,
	tableUrl: $api.system.getDictLabelList.url,
	modalTitle: '',
	visible: false,
	// 角色授权
	selectRow: null as any,
	labelCode: null,
	labelColumn: [
		{
			type: 'radio',
			width: 40,
			fixed: 'left',
			align: 'center',
		},
		{ type: 'seq', minWidth: 50, align: 'center', title: '序号' },
		{ field: 'title', title: '标签名称', align: 'center', minWidth: 100 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			slots: {
				// 使用插槽模板渲染
				default: 'status_edit',
			},
			width: 80,
		},
		{ field: 'labelTypeName', title: '标签类型', align: 'center', minWidth: 100 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, minWidth: 350 },
	],
});

//------------------定义调用方法-------------------------
function findLabelList() {
	labelListTable.value.query(state.queryLabelParam);
}
function onStatusChange(row) {
	let params = {};
	params = row;
	setTimeout(() => {
		$http
			.post($api.system.editLabel.url, params)
			.then(() => {
				$messageBox.success('修改成功', '成功提示');
			})
			.catch(() => {});
	}, 200);
}
function clearRadioRowEevnt() {
	state.selectRow = null;
	labelListTable.value.clearRadioRow();
}
function addLabel() {
	clearRadioRowEevnt();
	state.modalTitle = '新增标签';
	state.visible = true;
}
function editLabel() {
	if (state.selectRow) {
		state.modalTitle = '修改标签信息';
		state.visible = true;
	} else {
		$messageBox.warning('请先选择需要修改的数据', '提示');
	}
}
function deleteLabel() {
	if (state.selectRow) {
		const params = {
			labelCode: state.selectRow.labelCode,
		};
		setTimeout(() => {
			$http
				.post($api.system.deleteLabel.url, params)
				.then(() => {
					$messageBox.success('删除标签成功', '成功提示');
					findLabelList();
				})
				.catch(() => {});
		}, 100);
	} else {
		$messageBox.warning('请先选择需要删除的数据', '提示');
	}
}
function radioChangeEvent({ row }) {
	state.labelCode = row.labelCode;
	state.selectRow = row;
}
function saveLabel() {
	labelPage.value.saveLabel().then(() => {
		console.log(state.visible);
		findLabelList();
	});
}

//------------------初始化------------------------------
const params = {
	dictFields: 'LABELTYPE,STATUS',
};
$http.post($api.system.getBatchDict.url, params).then((res) => {
	state.dictData = res.result;
});
// 初始化数据
nextTick(() => {
	findLabelList();
});
</script>
<style lang="less" scoped></style>
